<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="listQuery.channelId"
        filterable
        clearable
        :filter-method="dataFilter"
        placeholder="选择渠道"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option
          v-for="item in options"
          :key="item.channelId"
          :label="item.channel_name"
          :value="item.channelId"
        />
      </el-select>
      <!-- <el-input v-model="listQuery.username" placeholder="用户名" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" /> -->
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        type="success"
        icon="el-icon-plus"
        @click="handleCopy"
      >
        复制配置
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        type="success"
        icon="el-icon-plus"
        @click="handleCopy1"
      >
        复制标签
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        style="float:right"
        @click="bulkManage"
        >批量管理绑定应用</el-button
      >
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="ID" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道名称" class-name="status-col" width="80">
        <template slot-scope="{ row }">
          {{ row.nickname }}
        </template>
      </el-table-column>
      <el-table-column label="已绑定应用" min-width="150" align="center">
        <template slot-scope="{ row }">
          <span v-for="item in row.list" :key="item.id">
            <el-tag
              :type="
                item.needPay === null
                  ? 'primary'
                  : item.needPay === 0
                  ? 'success'
                  : 'danger'
              "
            >
              {{ item.appName }}</el-tag
            >
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="管理"
        align="center"
        min-width="140"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button
            v-if="row.state == 1"
            type="info"
            size="mini"
            @click="handleselectByAppList(row)"
          >
            管理绑定应用
          </el-button>
          <el-button type="primary" size="mini" @click="labelList(row)">
            标签配置
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getChannelAppList"
    />
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible1"
      width="95%"
    >
      <el-checkbox
        v-model="bindingsApp"
        style="margin-top:20px;"
        @change="changeband"
        >只显示绑定的APP</el-checkbox
      >
      <el-table
        :key="tableKey"
        ref="singleTable"
        v-loading="listLoading"
        row-key="id"
        :data="channelConf"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="Id" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应用图标" width="100" align="center">
          <template slot-scope="{ row }">
            <img :src="row.icon" alt="" style="width: 26px;height:26px" />
          </template>
        </el-table-column>
        <el-table-column label="应用名称" width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.appName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否付费" width="180" align="center">
          <template slot-scope="{ row }">
            <el-radio-group v-model="row.needPay" size="small">
              <el-radio :label="1">
                付费
              </el-radio>
              <el-radio :label="0">
                免费
              </el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" width="180" align="center">
          <template slot-scope="{ row }">
            <el-radio-group v-model="row.state" size="small">
              <el-radio :label="1">
                启用
              </el-radio>
              <el-radio :label="0">
                禁用
              </el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="机构匹配" width="180" align="center">
          <template slot-scope="{ row }">
            <el-radio-group v-model="row.mechanismMatching" size="small">
              <el-radio :label="1">
                启用
              </el-radio>
              <el-radio :label="0">
                禁用
              </el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="绑定" min-width="80" align="center">
          <template slot-scope="{ row }">
            <el-checkbox v-model="row.binding" style="margin-top:20px;"
              >绑定</el-checkbox
            >
          </template>
        </el-table-column>
        <el-table-column label="排序" min-width="80" align="center">
          <template slot-scope="{ row }">
            <el-input
              v-model="row.orderWeight"
              style="margin-top:20px;text-align:center;"
            />
          </template>
        </el-table-column>
        <el-table-column label="拖拽"
          ><i class="el-icon-rank handleDrag"
        /></el-table-column>
      </el-table>

      <pagination
        v-show="apptotal > 0"
        :total="apptotal"
        :page.sync="applistQuery.current"
        :limit.sync="applistQuery.size"
        @pagination="handleselectByAppList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">
          取消
        </el-button>
        <el-button type="primary" @click="allUpdateData()">
          保存
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="95%"
    >
      <el-checkbox
        v-model="bindingsApp"
        style="margin-top:20px;"
        @change="changeband"
        >只显示绑定的APP</el-checkbox
      >
      <el-table
        :key="tableKey"
        ref="singleTable"
        v-loading="listLoading"
        row-key="id"
        :data="channelConf"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="Id" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应用图标" width="100" align="center">
          <template slot-scope="{ row }">
            <img :src="row.icon" alt="" style="width: 26px;height:26px" />
          </template>
        </el-table-column>
        <el-table-column label="应用名称" width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.appName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否付费" width="180" align="center">
          <template slot-scope="{ row }">
            <el-radio-group v-model="row.needPay" size="small">
              <el-radio :label="1">
                付费
              </el-radio>
              <el-radio :label="0">
                免费
              </el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" width="180" align="center">
          <template slot-scope="{ row }">
            <el-radio-group v-model="row.state" size="small">
              <el-radio :label="1">
                启用
              </el-radio>
              <el-radio :label="0">
                禁用
              </el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="机构匹配" width="180" align="center">
          <template slot-scope="{ row }">
            <el-radio-group v-model="row.mechanismMatching" size="small">
              <el-radio :label="1">
                启用
              </el-radio>
              <el-radio :label="0">
                禁用
              </el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="绑定" min-width="80" align="center">
          <template slot-scope="{ row }">
            <el-checkbox v-model="row.binding" style="margin-top:20px;"
              >绑定</el-checkbox
            >
          </template>
        </el-table-column>
        <el-table-column label="排序" min-width="80" align="center">
          <template slot-scope="{ row }">
            <el-input
              v-model="row.orderWeight"
              style="margin-top:20px;text-align:center;"
            />
          </template>
        </el-table-column>
        <el-table-column label="拖拽"
          ><i class="el-icon-rank handleDrag"
        /></el-table-column>
      </el-table>

      <pagination
        v-show="apptotal > 0"
        :total="apptotal"
        :page.sync="applistQuery.current"
        :limit.sync="applistQuery.size"
        @pagination="handleselectByAppList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="updateData()">
          保存
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="复制配置" :visible.sync="copydig" width="55%">
      <div>
        <div style="margin-top:10px">
          <span style="width:80px;display: inline-block;">源渠道：</span>
          <el-select
            v-model="copyConfig.fromchannelId"
            filterable
            :filter-method="dataFilter"
            placeholder="选择渠道"
            style="width: 200px;"
            class="filter-item"
            @change="changeChannelIdfrom('from', copyConfig.fromchannelId)"
          >
            <el-option
              v-for="item in options"
              :key="item.channelId"
              :label="item.channel_name"
              :value="item.channelId"
            />
          </el-select>

          <p>
            <span v-for="item in fromConfig" :key="item.id">
              <el-tag
                :type="
                  item.needPay === null
                    ? 'primary'
                    : item.needPay === 0
                    ? 'success'
                    : 'danger'
                "
              >
                {{ item.appName }}</el-tag
              >
            </span>
          </p>
        </div>

        <div style="margin-top:10px">
          <span style="width:80px;display: inline-block;">目标渠道：</span>
          <!-- <el-select
            v-model="copyConfig.channelIdList"
            filterable
            clearable
            multiple
            collapse-tags
            :filter-method="dataFilter"
            placeholder="选择渠道"
            style="width: 150px;"
            class="filter-item"
          >
            <el-option
              v-for="item in options"
              :key="item.channelId"
              :label="item.channel_name"
              :value="item.channelId"
            />
          </el-select> -->
          <MultipleSelect
            :selectOptions="options"
            :mulSelectLoading="mulSelectLoading"
            placeholder="选择渠道"
            type="channelId"
            :mulSelecteds="copyConfig.channelIdList"
            @update:updateMultipleSelect="
              val => (copyConfig.channelIdList = val)
            "
          >
          </MultipleSelect>
          <p>
            <span v-for="item in toConfig" :key="item.id">
              <el-tag
                :type="
                  item.needPay === null
                    ? 'primary'
                    : item.needPay === 0
                    ? 'success'
                    : 'danger'
                "
              >
                {{ item.appName }}</el-tag
              >
            </span>
          </p>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="copydig = false">
          取消
        </el-button>
        <el-button type="primary" @click="copyData()">
          保存
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="复制标签" :visible.sync="copydialog" width="55%">
      <div>
        <div style="margin-top:10px">
          <span style="width:80px;display: inline-block;">源渠道：</span>
          <el-select
            v-model="copyConfig.fromchannelId"
            filterable
            placeholder="选择渠道"
            style="width: 200px;"
            class="filter-item"
            @change="changeChannelIdfrom1('from', copyConfig.fromchannelId)"
          >
            <el-option
              v-for="item in options"
              :key="item.channelId"
              :label="item.channel_name"
              :value="item.channelId"
            />
          </el-select>
        </div>
        <div style="margin-top:10px">
          <span style="width:80px;display: inline-block;">目标渠道：</span>
          <!-- <el-select
            v-model="copyConfig.channelIdList"
            filterable
            clearable
            multiple
            placeholder="选择渠道"
            style="width: 80%;"
            class="filter-item"
          >
            <el-option
              v-for="item in options"
              :key="item.channelId"
              :label="item.channel_name"
              :value="item.channelId"
            />
          </el-select> -->
          <MultipleSelect
            :selectOptions="options"
            :mulSelectLoading="mulSelectLoading"
            placeholder="选择渠道"
            type="channelId"
            :mulSelecteds="copyConfig.channelIdList"
            @update:updateMultipleSelect="
              val => (copyConfig.channelIdList = val)
            "
          >
          </MultipleSelect>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="copydialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="copyData1()">
          保存
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="标签配置" :visible.sync="outerVisible" width="80%">
      <el-table
        v-loading="listLoading"
        :data="tableData1"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="编号" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标签类型" class-name="status-col" width="90">
          <template slot-scope="{ row }">
            {{ row.labelName }}
          </template>
        </el-table-column>
        <el-table-column label="应用名称" min-width="150" align="center">
          <template slot-scope="{ row }">
            <el-tag
              v-for="item in row.loanApps"
              :key="item.id"
              :type="
                item.needPay === null
                  ? 'primary'
                  : item.needPay === 0
                  ? 'success'
                  : 'danger'
              "
              effect="plain"
              style="margin:1px"
            >
              {{ item.appName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          min-width="140"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="editLabel(row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="编辑"
        :visible.sync="innerVisible"
        width="70%"
        append-to-body
      >
        <el-form :model="form1" label-width="100px" label-position="left">
          <el-form-item label="标签类型">
            <el-input v-model="form1.labelName"></el-input>
          </el-form-item>
          <el-form-item
            v-for="(domain, ind) in dynamicValidateForm.domains"
            :label="'产品名称' + (ind + 1)"
            :key="domain.key"
          >
            <el-select
              v-model="domain.value"
              clearable
              placeholder="请选择应用名称"
              style="width: 200px;"
              class="filter-item"
              @change="changeSelect"
            >
              <el-option
                v-for="(item, index) in selectArr"
                :key="index"
                :value="item.id"
                :label="item.appName"
              >
                {{ item.appName }}
              </el-option>
            </el-select>
            <el-button
              @click.prevent="removeDomain(domain)"
              style="margin-left:10px"
              v-show="ind != 0"
              >删除</el-button
            >
            <el-button
              v-show="ind + 1 == dynamicValidateForm.domains.length"
              @click="addDomain"
              type="info"
              >新增</el-button
            >
          </el-form-item>

          <el-form-item label="标签开关" v-if="form1.labelName == '推荐产品'">
            <el-switch
              v-model="form1.described"
              active-text="开"
              inactive-text="关"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { getChannelIdAndNick } from '@/api/user';
import {
  getChannelAppList,
  selectByAppList,
  listById,
  updateByAppId,
  updateChannelSetting,
  OneManyReplicatAppSettings,
  updateBatchByAppId,
  channelById,
  copyChannelToMany
} from '@/api/channel';
import { findAll, list, ids, findLoanAppByLabelId } from '@/api/label';
import waves from '@/directive/waves';
import Pagination from '@/components/Pagination';
import MultipleSelect from '@/components/MultipleSelect'; // secondary package based on el-pagination

export default {
  name: 'Channellist',
  components: { Pagination, MultipleSelect },
  directives: { waves },
  data() {
    return {
      newProId: [],
      proId: [],
      multipleSelection: [],
      fromConfig: [],
      toConfig: [],
      copyConfig: {
        fromchannelId: '',
        tochannelId: ''
      },
      bindingsApp: false,
      testCopy: '',
      tableData: [],
      total: 0,
      apptotal: 0,
      channelId: null,
      channelIdList: [],
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 100,
        apk: '',
        nickname: '',
        username: ''
      },
      applistQuery: {
        current: 1,
        size: 10
      },
      channelReqDto: {
        id: undefined,
        gmtDatetime: new Date(),
        sysKey: '',
        sysLabel: '',
        sysValue: ''
      },
      channelConf: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      channelConfdialog: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      dialogPvVisible: false,
      rules: {
        type: [
          { required: true, message: 'type is required', trigger: 'change' }
        ],
        timestamp: [
          {
            type: 'date',
            required: true,
            message: 'timestamp is required',
            trigger: 'change'
          }
        ],
        nickname: [{ required: true, message: '名称必填', trigger: 'blur' }]
      },
      downloadLoading: false,
      copydig: false,
      optionsCopy: [],
      options: [],
      appoptionsCopy: [],
      appoptions: [],
      listLoading: false,
      listQuery1: {
        // current: 1,
        // size: 999,
        channelId: ''
      },
      dynamicValidateForm: {
        domains: [
          {
            value: ''
          },
          {
            value: ''
          }
        ]
      },
      id: [],
      loanAppId: [],
      sortData: [],
      form1: {
        labelName: '',
        id: '',
        described: ''
      },
      tableData1: [],
      outerVisible: false,
      innerVisible: false,
      copydialog: false,
      loanAppLabel: {},
      selectArr: '',
      value: '',
      loanAppLabelIds: '',
      labelname: '',
      loanAppLabelRelationList: []
    };
  },
  created() {
    this.getChannelAppList(this.listQuery);
    this.getChannelIdAndNick();
    this.handleSelectionChange();
  },

  methods: {
    async handleCopy1() {
      this.copydialog = true;
      this.copyConfig = {};
      this.loanAppLabelRelationList = [];
    },
    submit() {
      this.loanAppId = [];
      let sortAndIdDto = [];
      this.dynamicValidateForm.domains.forEach((item, index) => {
        if (item.value) {
          sortAndIdDto.push({ loanAppId: item.value, sort: index + 1 });
        }
      });
      let saveBatchDto = {
        loanAppLabelId: this.loanAppLabelIds,
        labelName: this.form1.labelName,
        described: this.form1.described,
        sortAndIdDto,
        channelId: this.listQuery1.channelId
      };
      ids(JSON.parse(JSON.stringify(saveBatchDto))).then(res => {
        if (res.data.code == 200) {
          this.innerVisible = false;
          this.$notify({
            title: '业务提示',
            message: '添加成功',
            type: 'success',
            duration: 2000
          });
          this.slabel();
        } else {
          this.$notify({
            title: '业务提示',
            message: res.data.msg,
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      });
    },
    // 编辑标签列表
    async editLabel(row) {
      this.innerVisible = true;
      this.dynamicValidateForm.domains = [
        {
          value: ''
        },
        {
          value: ''
        }
      ];
      const res = await findLoanAppByLabelId({
        labelId: row.id,
        channelId: this.listQuery1.channelId
      });
      if (res.data.code == 200) {
        this.loanAppId = [];
        this.id = [];
        this.dynamicValidateForm.domains = [];
        this.sortData = res.data.data;
        if (this.sortData) {
          this.sortData.forEach(item => {
            this.loanAppId.push(item.id);
            this.id.push(item.id);
            this.dynamicValidateForm.domains.push({
              value: item.id
            });
          });
        } else {
          this.dynamicValidateForm.domains = [{ value: null }];
        }
      }
      this.form1.described = row.described;
      this.loanAppLabelIds = row.id;
      this.form1.labelName = row.labelName;
      let data = {
        appName: '',
        current: 0,
        productType: '',
        size: 999,
        state: 1
      };
      list(data).then(res => {
        if (res.data.code == 200) {
          this.selectArr = res.data.data.records;
        } else {
          this.$notify({
            title: '业务提示',
            message: res.data.msg,
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    // 刷新标签列表
    async slabel() {
      const res = await findAll(this.listQuery1);
      this.tableData1 = res.data.data;
    },
    // 展示标签列表
    async labelList(row) {
      this.outerVisible = true;
      this.listQuery1.channelId = row.id;
      const res = await findAll(this.listQuery1);
      this.tableData1 = res.data.data;
    },
    handleCopy() {
      this.copydig = true;
      this.copyConfig = {};
      this.fromConfig = [];
      this.toConfig = [];
    },
    async copyData() {
      this.$confirm('复制提示！', '确认复制吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        OneManyReplicatAppSettings({
          channelIdList: this.copyConfig.channelIdList,
          source: this.copyConfig.fromchannelId
        }).then(res => {
          if (res.data.code === 200) {
            this.$notify({
              title: '复制成功',
              message: '复制成功',
              type: 'success',
              duration: 2000
            });
            this.copydig = false;
            this.getChannelAppList(this.listQuery);
          } else {
            this.$notify({
              title: '复制失败',
              message: '复制失败',
              type: 'fail',
              duration: 2000
            });
          }
        });
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
      if (this.multipleSelection) {
        this.proId = [];
        this.multipleSelection.forEach(item => {
          this.proId.push(item.id);
        });
      }
    },
    async changeChannelIdfrom(type, id) {
      if (id) {
        const res = await listById({ channelId: id });
        this.fromConfig = res.data.data[0].list;
      }
    },
    async changeChannelIdfrom1(type, id) {
      if (id) {
        const res = await channelById({ channelId: id });
        this.loanAppLabelRelationList = res.data.data;
      }
    },
    async copyData1() {
      this.$confirm('复制提示！', '确认复制吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        copyChannelToMany({
          channelIds: this.copyConfig.channelIdList,
          loanAppLabelRelationList: this.loanAppLabelRelationList
        }).then(res => {
          if (res.data.code === 200) {
            this.$notify({
              title: '复制成功',
              message: '复制成功',
              type: 'success',
              duration: 2000
            });
            this.copydialog = false;
            this.getChannelAppList(this.listQuery);
          } else {
            this.$notify({
              title: '复制失败',
              message: '复制失败',
              type: 'fail',
              duration: 2000
            });
          }
        });
      });
    },
    async changeChannelIdto(type, id) {
      if (id) {
        const res = await listById({ channelId: id });
        this.toConfig = res.data.data[0].list;
      }
    },
    changeband() {
      console.log(this.bindingsApp);
    },
    dataFilter(val) {
      this.value = val;
      if (val) {
        // val存在
        this.options = this.optionsCopy.filter(item => {
          if (
            !!~item.channel_name.indexOf(val) ||
            !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        // val为空时，还原数组
        this.options = this.optionsCopy;
      }
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery);
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.optionsCopy.push(element);
          this.options.push(element);
        }
      });
    },
    // 获取列表
    async getChannelAppList(listQuery) {
      const res = await getChannelAppList(this.listQuery);
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    handleFilter() {
      this.listQuery.current = 1;
      if (
        this.listQuery.channelId === undefined ||
        this.listQuery.channelId == ''
      ) {
        this.getChannelAppList(this.listQuery);
      } else {
        this.options.forEach(element => {
          if (element.channelId === this.listQuery.channelId) {
            this.listQuery.nickname = element.channel_name;
            this.getChannelAppList(this.listQuery);
          }
        });
      }
    },
    async handleselectByAppList(row) {
      if (row.id || row.id === 0) {
        this.channelId = row.id;
      }
      this.applistQuery.id = this.channelId;
      const res = await selectByAppList(this.applistQuery);
      this.channelConf = res.data.data.records;
      this.apptotal = res.data.data.total;

      this.channelConf.forEach(element => {
        element.channelId = this.channelId;
        if (element.binding === 1) {
          element.binding = true;
        } else {
          element.binding = false;
        }
      });
      this.dialogFormVisible = true;
    },
    async bulkManage() {
      this.applistQuery.id = this.proId[0];
      const res = await selectByAppList(this.applistQuery);
      this.channelConf = res.data.data.records;
      this.apptotal = res.data.data.total;

      this.channelConf.forEach(element => {
        element.channelId = this.channelId;
        if (element.binding === 1) {
          element.binding = true;
        } else {
          element.binding = false;
        }
      });
      this.dialogFormVisible1 = true;
    },
    async updateData() {
      this.channelConf.forEach(element => {
        if (element.binding === true) {
          element.binding = 1;
        } else {
          element.binding = null;
        }
      });
      const res = await updateByAppId(this.channelConf);
      if (res.data.code === 200) {
        this.$notify({
          title: '更新配置',
          message: '更新成功！',
          type: 'success',
          duration: 2000
        });
        this.dialogFormVisible = false;
      } else {
        this.$notify({
          title: '更新配置',
          message: '更新失败！',
          type: 'fail',
          duration: 2000
        });
        this.dialogFormVisible = false;
      }
      this.getChannelAppList(this.listQuery);
    },
    async allUpdateData() {
      this.channelConf.forEach(element => {
        if (element.binding === true) {
          element.binding = 1;
        } else {
          element.binding = null;
        }
      });
      let channelIdsDto = {
        channelId: this.proId,
        loanApp: this.channelConf
      };
      const res = await updateBatchByAppId(channelIdsDto);
      if (res.data.code === 200) {
        this.$notify({
          title: '更新配置',
          message: '更新成功！',
          type: 'success',
          duration: 2000
        });
        this.dialogFormVisible1 = false;
      } else {
        this.$notify({
          title: '更新配置',
          message: '更新失败！',
          type: 'fail',
          duration: 2000
        });
        this.dialogFormVisible1 = false;
      }
      this.getChannelAppList(this.listQuery);
    },
    resetTemp() {
      this.channelReqDto = {
        id: undefined,
        apk: '',
        nickname: '',
        username: ''
      };
    },
    updateChannelSetting() {
      updateChannelSetting(this.channelConf).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: '更新配置',
            message: '更新成功！',
            type: 'success',
            duration: 2000
          });
        } else {
          this.$notify({
            title: '更新配置',
            message: '更新失败！',
            type: 'fail',
            duration: 2000
          });
        }
        this.channelConfdialog = false;
      });
      this.getChannelAppList(this.listQuery);
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? 'ascending' : 'descending';
    }
  }
};
</script>

<style scoped>
.pic {
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(35, 248, 124);
}
.fail {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name {
  margin-left: 50px;
  margin-top: 10px;
  color: rgb(172, 176, 177);
}
.title {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}
.box {
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}
.nick {
  font-size: 30px;
  font-weight: 600;
}
.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}
.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
